<script setup lang="ts">
    import {
        reqGetComments,
        reqSetComment,
        reqDelGood,
        reqSetGood,
    } from "@/api/article";
    import { CommetList } from "@/types/article";
    import { Toast } from "vant";
    import { ref } from "vue";
    const props = defineProps({
        currentComment: Object,
        articleId: String,
    });
    const list = ref<CommetList>([]);
    const loading = ref(false);
    const finished = ref(false);
    const offset = ref("");
    const replyComment = ref("");
    const onLoad = async () => {
        try {
            console.log(props.currentComment);
            const { data } = await reqGetComments(
                "c",
                props.currentComment!.com_id,
                offset.value
            );
            console.log(data);
            const arr = data.data.results;
            offset.value = data.data.last_id;
            list.value = [...list.value, ...arr];
            loading.value = false;
            if (arr.length === 0) {
                finished.value = true;
            }
        } catch (error) {
            console.log(error);
        }
    };
    const replyCommentFn = async () => {
        if (replyComment.value === "") return;
        const { data } = await reqSetComment(
            props.currentComment!.com_id,
            replyComment.value,
            props.articleId
        );
        console.log("评论成功的返回", data);
        console.log(data.data.new_obj);
        // 放本地视图的最上面
        list.value.unshift(data.data.new_obj);
        Toast.success("评论成功");
        replyComment.value = "";
        props.currentComment!.reply_count++;
        // onLoad();
    };
    // 切换点赞
    const toggleCommentLike = async (comment: any) => {
        try {
            if (comment.is_liking) {
                // 是点赞状态,那就取消点赞
                await reqDelGood(comment.com_id);
                Toast.success("取消点赞");
            } else {
                // 是取消点赞的状态，那就是点赞
                await reqSetGood(comment.com_id);
                Toast.success("点赞成功");
            }
            // 数据反显
            comment.is_liking = !comment.is_liking;
        } catch (error) {
            console.log(error);
            Toast.fail("操作失败");
        }
    };
</script>
<template>
    <div class="article-comments">
        <!-- 导航栏 -->
        <van-nav-bar :title="`${currentComment!.reply_count}条回复`">
            <van-icon @click="$emit('closeReply')" slot="left" name="cross" />
        </van-nav-bar>
        <!-- /导航栏 -->

        <!-- 当前评论 -->
        <van-cell>
            <van-image
                slot="icon"
                round
                width="30"
                height="30"
                style="margin-right: 10px"
                :src="currentComment!.aut_photo" />
            <span style="color: #466b9d" slot="title">{{
                currentComment!.aut_name
            }}</span>
            <div slot="label">
                <p style="color: #363636">{{ currentComment!.content }}</p>
                <p style="display: flex; justify-content: space-between">
                    <span style="margin-right: 10px">{{
                        currentComment!.pubdate
                    }}</span>
                    <van-icon
                        @click="toggleCommentLike(currentComment)"
                        slot="right-icon"
                        :name="currentComment!.is_liking ? 'like' : 'like-o'" />
                </p>
            </div>
        </van-cell>
        <!-- /当前评论 -->
        <van-divider>全部回复</van-divider>

        <!-- 对当前评论 回复列表 -->
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad">
            <van-cell v-for="(item, index) in list" :key="index">
                <van-image
                    slot="icon"
                    round
                    width="30"
                    height="30"
                    style="margin-right: 10px"
                    :src="item.aut_photo" />
                <span style="color: #466b9d" slot="title">{{
                    item.aut_name
                }}</span>
                <div slot="label">
                    <p style="color: #363636">{{ item.content }}</p>
                    <p>
                        <span style="margin-right: 10px">{{
                            item.pubdate
                        }}</span>
                    </p>
                </div>
            </van-cell>
        </van-list>
        <!-- 回复列表 -->

        <!-- 发布回复 -->
        <van-cell-group class="publish-wrap">
            <van-field
                clearable
                v-model.trim="replyComment"
                placeholder="请输入评论内容"
                @keyup.enter="replyCommentFn">
                <template #button>
                    <van-button
                        @click.stop="replyCommentFn"
                        size="mini"
                        type="primary"
                        >回复</van-button
                    >
                </template>
            </van-field>
        </van-cell-group>
        <!-- /发布回复 -->
    </div>
</template>

<style lang="scss" scoped>
    // 发表评论的区域是固定在下端的
    .publish-wrap {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
    }
    // 给发表评论区空出地方
    .van-list {
        margin-bottom: 45px;
    }
</style>
